import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// @ts-ignore
import px2viewport from 'postcss-px-to-viewport';
import { fileURLToPath } from 'url';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: { port: 3003 },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    emptyOutDir: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    postcss: {
      plugins: [
        px2viewport({
          viewportWidth: 375, // 设计稿宽度（一般是iPhone6的375px）
          unitPrecision: 5, // 转换精度
          propList: ['*'], // 需要转换的属性（*表示全部）
          selectorBlackList: ['ignore-', 'hairlines'], // 不转换的选择器
          minPixelValue: 1, // 最小转换像素值
          mediaQuery: false, // 是否转换媒体查询中的px
          exclude: /node_modules/, // 排除node_modules中的文件
        }),
      ],
    },
  },
});
